<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/style/style.css">
<script src="${pageContext.request.contextPath}/static/script/index.js"></script>
<script src="${pageContext.request.contextPath}/static/script/button.js"></script>
<script>
    var helpMessage = '在此用户可以查看个人信息和订单情况';
    function helpOnClick(){
    	alert(helpMessage);
    }
</script>
<title>${account.nick} - 个人中心</title>
</head>
<body>
	<nav class="aho-top-bar aho-box-shadow-mid">
		<section class="main">
			<span><a href="${pageContext.request.contextPath}">OnlineBookStore</a></span>
		</section>
		<section class="toolbar">
			<a class="toolbar-action" onclick="helpOnClick()"> <span
				class="aho-icon aho-icon-help"></span>
			</a>
			<a class="toolbar-action"
				href="${pageContext.request.contextPath}/shopping-cart"> <svg
					style="width: 24px; height: 24px;" fill="none"
					stroke="currentColor" viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg">
					<path stroke-linecap="round" stroke-linejoin="round"
						stroke-width="2"
						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
			</a>
			<a href="${pageContext.request.contextPath}/logout"
				class="toolbar-action"> <span
				class="aho-icon aho-icon-logout"></span>
			</a>
		</section>

	</nav>
	<main class="aho-container">
		<div class="profile-main aho-box-shadow-sm">
			<h2>订单详情</h2>
			<p>订单号： <strong>${orderItems.get(0).orderNo}</strong> </p>
			<table class="aho-table">
				<tr>
					<th data-id="id"><span>No</span>
					<div></div></th>
					<th data-id="orderNo"><span>书名</span>
					<div></div></th>
					<th data-id="nick"><span>单价</span>
					<div></div></th>
					<th data-id="userId"><span>数量</span>
					<div></div></th>
				</tr>
				<c:set scope="page" var="idx" value="${1}" />
				<c:forEach items="${orderItems}" var="orderItem">
					<tr data-id="${orderItem.id}">
						<td>${idx}</td>
						<td style="min-width: 450px;">${orderItem.bookTitle}</td>
						<td>${orderItem.price}</td>
						<td>${orderItem.amount}</td>
					</tr>
					<c:set scope="page" var="idx" value="${idx+1}" />
				</c:forEach>
			</table>
		</div>
	</main>
</body>
</html>